<template>
  <div v-if="!typerInitialized">
    <tg-form-basic-dialog
      ref="ref-main"
      :dialog-c-m="dialogCM"
      :title="title"
      :max-height="maxHeight"
      :hold-height="holdHeight"
      :form="form"
      :control-bar="controlBar"
    />
    <component
      :is="item.component"
      v-for="(item, index) in components"
      :key="buildDOMKey(item, index)"
      :ref="`ref-sub-${index}`"
      v-bind="item.props"
      v-on="item.events"
    />
  </div>
</template>

<script lang="ts">
/*
prop 列表 [参考 Template]
  operate: 'edit' | 'view' 操作类型
metaType 列表 [参考 TgFormBasicDialog]
  dialogCM
  title
  maxHeight
  holdHeight
  form
  controlBar
ref 列表
  ref-main [默认]
  ref-sub-${index}
*/
import { Component, Prop } from 'vue-property-decorator'
import { ITgFormBasicDialog } from '@TG/interface/types/component'
import { isEmpty } from '@TG/kit/validate'
import Template from './Template'
import TgFormBasicDialog from '@TG/components/TgForm/TgFormBasicDialog.vue'

@Component({
  name: 'TyperFormBasicDialog',
  components: {
    TgFormBasicDialog
  }
})
export default class extends Template {
  @Prop({ type: String, required: true }) protected operate!: 'edit' | 'view'

  get dialogCM() {
    return this.getMeta(this, 'dialogCM')
  }

  get title() {
    return this.getMeta(this, 'title')
  }

  get maxHeight() {
    return this.getMeta(this, 'maxHeight')
  }

  get holdHeight() {
    return this.getMeta(this, 'holdHeight')
  }

  get form() {
    return this.getMeta(this, 'form')
  }

  get controlBar() {
    let showSave: boolean = true
    let showReset: boolean = true
    if (this.operate === 'view') {
      showSave = false
      showReset = false
    }
    return Object.assign({}, this.getMeta(this, 'controlBar'), {
      showSave,
      showReset
    })
  }

  public getTemplateName() {
    return 'TyperFormBasicDialog'
  }

  public getMainData() {
    const form = this.ref() as ITgFormBasicDialog
    return form.getModel()
  }

  public refresh() {
    // 空实现
  }

  public defaultRef() {
    return 'ref-main'
  }

  public showDialog(params: any, dynamicModel: any) {
    let operate: 'add' | 'edit' | 'view' = this.operate
    if (operate === 'edit' && isEmpty(params)) {
      operate = 'add'
    }
    const form = this.ref() as ITgFormBasicDialog
    form.showDialog()
    form.initForm(operate, params, dynamicModel)
  }

  public hideDialog() {
    const form = this.ref() as ITgFormBasicDialog
    form.hideDialog()
  }
}
</script>
